<!--顶部-->
<div class="nav-top">

    <!--页面顶部白条条，由js动态加载-->

    <!--头部-->
    <div class="header" id="headApp">
        <div class="py-container">
            <div class="yui3-g Logo">
                <div class="yui3-u Left logoArea">
                    <a class="logo-bd" title="淼森" href="index.html" target="_blank"></a>
                </div>
                <div class="yui3-u Center searchArea">
                    <div class="search">
                        <form action="" class="sui-form form-inline">
                            <!--searchAutoComplete-->
                            <div class="input-append">
                                <input @keyup.enter="search()" type="text" id="autocomplete" v-model="key" class=" input-xxlarge"/>
                                <button @click="search()" class="sui-btn btn-xlarge my-btn" type="button" ></button>
                            </div>
                        </form>
                    </div>
                    <div class="hotwords">
                        <ul>
                            <li class="f-item">道路救援</li>
                            <li class="f-item">品牌闪购</li>
                            <li class="f-item">以旧换新</li>
                            <li class="f-item">二手轮胎</li>
                            <li class="f-item">汽车必备</li>
                            <li class="f-item">汽车摆件</li>
                            <li class="f-item">汽车用品</li>
                        </ul>
                    </div>
                </div>
                <div class="yui3-u Right shopArea">
                    <div class="fr shopcar">
                        <div class="show-shopcar" id="shopcar">
                            <span class="car"></span>
                            <a class="sui-btn btn-default btn-xlarge" href="cart.html" target="_blank">
                                <span>我的购物车</span>
                                <i class="shopnum">0</i>
                            </a>
                            <div class="clearfix shopcarlist" id="shopcarlist" style="display:none">
                                <p>"啊哦，你的购物车还没有商品哦！"</p>
                                <p>"啊哦，你的购物车还没有商品哦！"</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="yui3-g NavList">
                <div class="Left"></div>
                <div class="yui3-u Center navArea">
                    <ul class="nav">
                        <li class='f-item'><a href='seckill-index.html' class='my-href' target='_blank'>秒杀</a></li>
                        <li class='f-item'>服装城</li>
                        <li class='f-item'>美妆馆</li>
                        <li class='f-item'>品优超市</li>
                        <li class='f-item'>全球购</li>
                        <li class='f-item'>闪购</li>
                        <li class='f-item'>团购</li>
                        <li class='f-item'>有趣</li>
                    </ul>
                </div>
                <div class="yui3-u Right"></div>
            </div>
        </div>
    </div>
    <script src="./js/vue/vue.js"></script>
    <script src="./js/pages/shortcut.js"></script>
    <script type="text/javascript">
        console.log(Vue);
        var headVm = new Vue({
            el: "#headApp",
            data: {
                key: "",
                query: location.search
            },
            methods: {
                search() {
                    if(this.key == null){
                        this.key="";
                    }
                    window.location = 'search.html?key=' + this.key;
                },
                getUrlParam: function (name) {
                    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
                    var r = window.location.search.substr(1).match(reg);
                    if (r != null) {
                        return decodeURI(r[2]);
                    }
                    return null;
                }
            },
            created() {
                this.key = this.getUrlParam("key");
            },
            components: {
                shortcut
            }
        })
    </script>
    <style type="text/css">
        .my-btn{
            color: black;
            background: black;
        }
    </style>
</div>
